<template>
	<view class="wrap">
    <u-toast ref="uToast" />
     <u-swiper v-if="ban" class="ban" :list="ban" height="500"></u-swiper>
    <view v-if="con" class="search-box">
      <view class="tit  u-flex u-row-between ">
        <view class="u-font-30">{{getString('house_title')}}</view>
        <view class="status" style="font-weight: normal;" :class="con.payment_status == 1 ? 'u-error': con.payment_status == 2 ? 'u-primary' : 'u-555'">
          <template v-if="con.payment_status == 1">待付款</template>
          <template v-else-if="con.payment_status == 2">已支付</template>
          <template v-else-if="con.payment_status == 0">已取消</template>
        </view>
      </view>
      <view class="u-flex u-row-center box1">
        <view class="item">
          <view class="u-font-30 u-primary">{{getString('house_area')}}㎡</view>
          <view class="u-font-28 u-tips-color">面积</view>
        </view>
        <view class="line"></view>
        <view class="item">
          <view class="u-font-30 u-primary">{{getString('tenancy_price')}} <text v-if="con.tenancy_price">元</text> </view>
          <view class="u-font-28 u-tips-color">租金</view>
        </view>
      </view>
      <view class="u-flex u-row-between u-flex-wrap box2">
        <view class="item u-flex">
          <view class="lab">楼层</view>
          <view>{{getString('house_floor_num')}}楼</view>
        </view>
        <view class="item u-flex">
          <view class="lab">类型</view>
          <view>{{getString('type_list_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">装修</view>
          <view>{{getString('decorationCn')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">支付</view>
          <view>{{getString('payment_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">朝向</view>
          <view>{{getString('toward_name')}}</view>
        </view>
      </view>
      <view class="box3 u-flex u-row-between u-col-center">
        <view>
          <!-- <view class="u-font-30 xs-name" v-if="con.user_info && con.user_info.username">{{con.user_info.username}}</view> -->
          <view class="u-font-30 xs-name" v-if="con.user_info && con.user_info.username">{{con.user_info.username}}</view>
          <!-- <view class="u-tips-color">滨湖金融港A座 物业经理</view> -->
        </view>
        <!-- <u-icon name="arrow-right" color="#333" size="28"></u-icon> -->
      </view>
      <view class="box4">
        <view class="u-font-30 u-m-b-10">{{getString('community_name')}}</view>
        <view class="u-tips-color">地址：{{getString('house_address')}}</view>
      </view>
      <view v-if="con.configList && con.configList.length > 0" class="box6">
        <view class="u-font-30 xs-name u-m-b-20">房源设施</view>
        <view class="sheshi-list u-flex">
          <view v-for="item in con.configList" :key="item.id" class="item u-flex">
            <image :src="http+item.configImage" mode="" class="icon"></image>
            <view>{{item.configName}}</view>
          </view>
        </view>
      </view>
      <view v-if="con.lock_password" class="box6">
        <view class="u-font-30 xs-name u-m-b-20">房屋密码</view>
        <view>{{con.lock_password}}</view>
      </view>
      <view class="box5" v-if="content">
        <rich-text :nodes="content"></rich-text>
      </view>
      <view class=" bottom-box" style="width: 100%;">
        <view class="u-flex u-col-center u-row-right">
          <view v-if="con.user_info && con.user_info.mobile" class="call-btn info" @click="call">拨打电话</view>
          <view v-if="con.payment_status == 2" class="call-btn info" @click="showPass(1)">设置密码</view>
          <view v-if="con.payment_status == 2" class="call-btn info" @click="showPass(2)">退租</view>
          <view v-if="con.payment_status == 1" class="call-btn info" @click="pay()">立即支付</view>
          <view v-if="con.payment_status == 1" class="call-btn info" @click="cancelOrder(con.tenancy_order_sn)">取消</view>
        </view>
        <zb-ipx />
      </view>
    </view>
    <!-- 支付 -->
    <zb-pay ref="payRef" @ok="getCon" />
    
    <u-popup v-model="show" mode="bottom" border-radius="14">
      <div class="pup">
        <view class="title u-font-30 u-flex u-col-center u-row-between">
          <template v-if="type === 1">设置密码</template>
          <template v-else-if="type === 2">申请退租</template>
          <u-icon name="close" color="#aaa" size="26" @click="show = false"></u-icon>
        </view>
        <u-input v-if="type === 1" type="password" placeholder="请输入密码" v-model="password" class="text" ></u-input>
        <template v-else-if="type === 2">
          <u-form labelPosition="left" :model="returnFormData" :rules="rules" ref="uForm" label-width ="160" class="tuizu-form">
            <u-form-item label="收款人姓名" prop="userName" borderBottom>
              <u-input v-model="returnFormData.userName" placeholder="请输入收款人姓名"></u-input>
            </u-form-item>
            <u-form-item label="身份证号" prop="userIdCard" borderBottom>
              <u-input v-model="returnFormData.userIdCard" placeholder="请输入收款人身份证号"></u-input>
            </u-form-item>
            <u-form-item label="手机号" prop="userMobile" borderBottom>
              <u-input v-model="returnFormData.userMobile" maxlength="11" placeholder="请输入收款人收款人手机号"></u-input>
            </u-form-item>
            
            <u-form-item label="开户行" prop="bankName" borderBottom>
              <u-input v-model="returnFormData.bankName" placeholder="请输入开户行"></u-input>
            </u-form-item>
            <u-form-item label="收款账号" prop="bankNo" borderBottom>
              <u-input v-model="returnFormData.bankNo" placeholder="请输入收款账号"></u-input>
            </u-form-item>
            <u-form-item label="退租原因" prop="reason" borderBottom>
              <u-input v-model="returnFormData.reason" placeholder="请输入退租原因"></u-input>
            </u-form-item>
            
          </u-form>
        </template>
        <u-button type="primary" class="call-btn u-font-30" @click="setPassword">提交</u-button>
        <zb-ipx />
      </div>
    </u-popup>
    <zb-ipx />
  </view>
</template>
<style lang="scss" scoped>
  page{padding-bottom: 100rpx;}
  .bottom-box{
    position: fixed; background-color: #fff; width: 100%; left:0; bottom: 0; z-index:999; padding: 20rpx 30rpx; box-shadow: 0 -2rpx 8rpx #ededed;
    .call-btn{
      margin: 0 0 0 20rpx; height: 65rpx; border-radius: 100rpx; padding: 0 18rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx;
      &.info{
        // background-color: #f6f6f6; border: 1px solid #3C3D3E;
        background-color: #f1f5ff;
        border: 1px solid #003dea;
        color: #003dea;
      }
    }
  }
  .pup{
    background-color: #fff; padding: 30rpx; padding-bottom: 20rpx;
    .title{padding-bottom: 30rpx; border-bottom: 1px solid #ddd; margin-bottom: 30rpx; font-weight: bold;}
    .text{border: 1px solid #ddd; border-radius: 10rpx; padding: 0 20rpx !important; margin-bottom: 20rpx; display: flex;}
    
  }
  .wrap{background-color: #fff;}
  .line{margin: 0 -30rpx; height: 15rpx; background-color: #f5f5f5; padding: 0 30rpx;}
  .password{
    height: 168rpx;margin: 0 auto;
    width: 100%;
    background: #FFFFFF;
    border-radius: 16rpx; padding: 26rpx;
    .icon{width: 46rpx; height: 46rpx; margin-right: 10rpx;}
    .name{font-size: 30rpx; color: #282828;}
    .icon1{width: 28rpx; height: 28rpx; margin: 0 16rpx;}
    .con{
      width: 186rpx;
      height: 60rpx;
      border-radius: 32rpx; font-size: 28rpx;
      border: 1px solid rgba(151,151,151,0.43);
    }
  }
  .call-btn{margin: 40rpx 0;}
  .steps{
    .item{
      padding-bottom: 40rpx; position: relative; line-height: 36rpx; align-items: flex-start;
      &::after{content:''; display: block; width: 1px; height: 100%; background-color: #ededed; position: absolute; left: 10rpx; top: 20rpx; z-index: 1;}
      &:last-child{
        &::after{display: none;}
      }
      &:first-child{
        color: #2A70F9;
        .icon{background-color: #2A70F9;}
        
      }
    }
    .icon{width: 20rpx; height: 20rpx; background-color: #ddd; border-radius: 50%; position: relative; z-index: 50;margin-right: 16rpx; margin-top: 12rpx;}
    .name{flex: 1; width: 100%; font-size: 28rpx;}
    .time{font-size: 26rpx; color: #666; margin-top: 8rpx;}
    
  }
  .xs-name{margin-bottom: 10rpx; font-weight: bold;}
  .sheshi-list{
    .item{
      width: 32%; margin-right: 2%;
      &:nth-child(3n+3){margin-right: 0px;}
    }
    .icon{width: 30rpx; height: 30rpx; object-fit: contain; margin-right: 10rpx;}
    .txt{}
  }
  .box1{
    margin-bottom: 40rpx;
    
    .item{width: 48%; text-align: center;}
  }
  .box2{
    padding-bottom: 40rpx; border-bottom: 1px solid #ededed; margin-bottom: 40rpx;
    .lab{width: 100rpx; color: #999;}
    .item{width: 48%; margin-bottom: 16rpx;}
  }
  .box3{
    margin-bottom: 20px;
    
  }
  .box4{
    padding: 20rpx; background-color: #F5F6FA; margin-bottom: 20px; border-radius: 6rpx;
  }
  .box6{
  }
  .box5,.box6{
    margin-bottom: 40rpx; padding-bottom: 40rpx; border-bottom: 1px solid #ededed;
  }
  .list{
    .item{
      padding: 30rpx; margin-bottom: 30rpx; border-bottom: 1px solid #ededed; padding-top: 0;
      .name{font-size: 30rpx; margin-bottom: 14rpx; color: #3C3D3E;}
      .lab{color: #3C3D3E; margin-bottom: 20rpx;}
      .price1{color: #2A70F9; font-size: 30rpx;}
      .div{margin-left: 20rpx;}
    }
  }
  .ban{position: relative; z-index: 1;}
  .search-box{
    padding: 30rpx; margin: -30rpx 0 30rpx; position: relative; z-index: 4; border-radius: 10rpx 10rpx 0 0; background-color: #fff; padding-bottom: 10rpx;
  }
  
</style>
<script>
	export default {
		data() {
			return {
        content:'',
        con:null,
        http:'',
        ban:[],
        id:'',
        password:'',
        show:false,
        type:1, // 1-设置密码， 2-申请退租
        rules: {
          'userName': { type: 'string', required: true, message: '请填写收款人姓名', trigger: ['blur', 'change'] },
          'bankName': { type: 'string', max: 200, required: true, message: '请填写开户行', trigger: ['blur', 'change']},
          'bankNo': { type: 'string', max: 30, required: true, message: '请填写收款账号',  trigger: ['blur', 'change'] },
          'userIdCard': { type: 'string', max: 30, required: true, message: '收款人身份证', trigger: ['blur', 'change'] },
          'reason': { type: 'string', max: 500, required: true, message: '请填写退租原因', trigger: ['blur', 'change'] },
          userMobile: [
            { required: true,  message: '请输入手机号', trigger: ['change','blur']},
            {
              // 自定义验证函数，见上说明
              validator: (rule, value, callback) => {
                // 上面有说，返回true表示校验通过，返回false表示不通过
                // this.$u.test.mobile()就是返回true或者false的
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change
              trigger: ['change','blur'],
            }
          ]
        },
        returnFormData:{
          userName:'', // 收款人姓名
          bankName:'', //开户行
          bankNo:'', // 收款账号
          reason:'', // 退租原因
          orderNo:'',
          userIdCard:'', // 收款人身份证
          userMobile:'', // 收款人手机号
        }
			}
		},
    onReady() {
    	
    },
    onLoad(e){
      this.http = this.$api.httpUrlApi();
      this.id = e.id;
      this.returnFormData.orderNo = e.id;
      this.getCon()
    },
    watch: {
      
    },
    
		methods: {
      // 取消订单
      cancelOrder(id){
        uni.showModal({
          title:'温馨提示',
          content:'您确定要取消该笔订单吗？',
          success: (res) => {
            if(res.confirm){
              this.$api.cancelOrderApi({order_no:id}).then(res1=>{
                if(res1.code == 1){
                  
                  this.myShowToast('订单取消成功')
                  const list = JSON.parse(JSON.stringify(this.rent.list))
                  list[index].payment_status = '0';
                  this.rent.list = list;
                }else{
                  this.$refs.uToast.show({
                    title:res.msg,
                  })
                }
              })
              
            }
          }
        })
      },
      pay(){
        const data = {
          house_sn: this.con.houseSn,
          start_date:this.con.tenancy_start_time,
          end_date:this.con.tenancy_end_time,
          type_id:this.con.lease_type, // 1按月，2-按天
          month_number:this.con.month_number, // 月数
          ordersNo:this.con.tenancy_order_sn,
          orderFee: this.con.tenancy_price, // 总价
          house_title: this.con.house_title, // 标题
        }
        this.$refs.payRef.showFun(data)
      },
      getCon(){
        this.$api.tenancyOrderDetailApi({ordersNo: this.id}).then(res=>{
          if(res.code === 1){
            this.con = res.data;
            console.log('this.con===', this.con)
            this.content = res.data.content ? res.data.content : '';
            if(res.data.picList && res.data.picList.length > 0){
              this.ban = res.data.picList.map(m => {
                return this.http+m.image
              })
              console.log('this.ban---', this.ban)
            }
          }else{
            this.myShowToast(res.msg)
          }
        })
            
      },
      showPass(e){
        this.type = e;
        this.show = true;
        this.password = '';
        if(e == 2){
          setTimeout(()=>{
            this.$refs.uForm.setRules(this.rules);
          })
        }
      },
      myShowToast(msg){
        this.$refs.uToast.show({
          title:msg,
        })
      },
      setPassword(){
        if(this.type === 2){
          this.$refs.uForm.validate(valid => {
            console.log('valid---', valid)
            if (valid) {
              this.$api.tenancyOrderReturnApi(this.returnFormData).then(res=>{
                this.myShowToast(res.msg)
                if(res.code === 1){
                  this.show = false;
                }
                
              })
            } else {
              console.log('验证失败');
            }
          });
        }else{
          this.$api.setLockPasswordApi({ordersNo: this.id, password:this.password}).then(res=>{
            if(res.code === 1){
              this.myShowToast('密码设置成功')
              this.show = false;
              this.con.lock_password = this.password;
              this.password = '';
            }else{
              this.myShowToast(res.msg)
            }
            
          })
        }
        
      },
      link(id){
        uni.navigateTo({
          url:'/rentHouse/kehu/submitOrder?id='+id
        })
      },
      call(){
        uni.makePhoneCall({
        	phoneNumber: this.con.user_info.mobile //仅为示例
        });
      },
      timestampToDateFormat(timestamp) {
        const dateObj = new Date(timestamp*1000); // 创建Date对象
        const year = dateObj.getFullYear(); // 获取年份
        const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取月份，并补零
        const day = ("0" + dateObj.getDate()).slice(-2); // 获取日期，并补零
        
        return `${year}-${month}-${day}`; // 返回转换后的日期格式
      },
      getString(e){
        return this.con[e] ? this.con[e] : '-'
      },
      getOtherId(e, name){
        this[name] = e;
        if(name != 'areaId'){
          this.showShaix = false;
        }else{
          this.areaId2 = ''
        }
        getList()
      },
      // 筛选开光
      getShaix(e){
        this.shaix_type = e;
        this.showShaix = true;
      },
      // 获取列表
      getList(){
        
      },
		},
    onShareAppMessage() {
      // return {
      //   title: '',
      //   path: '/pages/index/index',
      // }
    },
	}
</script>